<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      body,
      ul,
      li,
      select {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul,
      li {
        list-style: none;
      }
      .calculator {
        max-width: 300px;
        margin: 20px auto;
        border: 1px solid #eee;
        border-radius: 3px;
      }
      .cal-header {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #eee;
        text-align: center;
      }
      .cal-main {
        font-size: 14px;
      }
      .cal-main .origin-value {
        padding: 15px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cal-main .origin-type,
      .cal-main .target-type {
        padding-left: 5px;
        width: 70px;
        font-size: 14px;
        height: 30px;
        border: 1px solid #eee;
        background-color: #fff;
        vertical-align: middle;
        margin-right: 10px;
        border-radius: 3px;
      }
      .cal-keyboard {
        overflow: hidden;
      }
      .cal-items {
        overflow: hidden;
      }
      .cal-items li {
        user-select: none;
        float: left;
        display: inline-block;
        width: 75px;
        height: 75px;
        text-align: center;
        line-height: 75px;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        box-sizing: border-box;
      }
      li:nth-of-type(4n + 1) {
        border-left: none;
      }
      li[data-action="operator"] {
        background: #f5923e;
        color: #fff;
      }
      .buttons {
        float: left;
        width: 75px;
      }
      .buttons .btn {
        width: 75px;
        background-color: #fff;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
        height: 150px;
        line-height: 150px;
        text-align: center;
      }
      .btn-esc {
        color: #ff5a34;
      }
      .btn-backspace {
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="calculator">
      <header class="cal-header">简易计算器</header>
      <main class="cal-main">
        <div class="origin-value">0</div>
        <div class="cal-keyboard">
          <ul class="cal-items">
            <li data-action="num">7</li>
            <li data-action="num">8</li>
            <li data-action="num">9</li>
            <li data-action="operator">÷</li>
            <li data-action="num">4</li>
            <li data-action="num">5</li>
            <li data-action="num">6</li>
            <li data-action="operator">x</li>
            <li data-action="num">1</li>
            <li data-action="num">2</li>
            <li data-action="num">3</li>
            <li data-action="operator">-</li>
            <li data-action="num">0</li>
            <li data-action="operator">清空</li>
            <li data-action="operator">=</li>
            <li data-action="operator">+</li>
          </ul>
        </div>
      </main>
    </div>
    <script type="text/javascript">
        /**
         * 这题的模板提示内容应该算是很明确了，小友的问题主要应该出现在如何实现最多保留两位小数，
         * 如果单纯的tofixed整数或者一位小数也会变成两位小数，这里就需要一波操作，
         * 我们先乘100，使用~~向下取整（严格来说应该四舍五入的，但不影响过这题），再除以100，不就变成最多两位小数了嘛
         * 并且不会影响其他情况
         * 这是牛客JS题最后一题，也就是说我们的这个专栏也告一段落了，
         * 感谢小友们陪伴眨眼睛完成这样一个题集专栏，共勉之，愿君`钱`程似锦🌹🌹🌹
         */
      var Calculator = {
        init: function () {
          var that = this;
          if (!that.isInited) {
            that.isInited = true;
            // 保存操作信息
            // total: Number, 总的结果
            // next: String, 下一个和 total 进行运算的数据
            // action: String, 操作符号
            that.data = { total: 0, next: "", action: "" };
            that.bindEvent();
          }
        },
        bindEvent: function () {
          var that = this;
          // 请补充代码：获取 .cal-keyboard 元素
          var keyboardEl = null;
          keyboardEl = document.querySelector(".cal-keyboard");
          keyboardEl &&
            keyboardEl.addEventListener("click", function (event) {
              // 请补充代码：获取当前点击的dom元素
              var target = null;
              target = event.target;
              // 请补充代码：获取target的 data-action 值
              var action = "";
              action = target.getAttribute("data-action");
              // 请补充代码：获取target的内容
              var value = "";
              value = target.innerHTML;
              if (action === "num" || action === "operator") {
                that.result(value, action === "num");
              }
            });
        },
        result: function (action, isNum) {
          var that = this;
          var data = that.data;
          if (isNum) {
            data.next = data.next === "0" ? action : data.next + action;
            !data.action && (data.total = 0);
          } else if (action === "清空") {
            // 请补充代码：设置清空时的对应状态
            data.total = undefined;
            data.next = undefined;
            data.action = undefined;

            data.total = 0;
            data.next = "";
            data.action = "";
          } else if (action === "=") {
            if (data.next || data.action) {
              data.total = that.calculate(data.total, data.next, data.action);
              data.next = "";
              data.action = "";
            }
          } else if (!data.next) {
            data.action = action;
          } else if (data.action) {
            data.total = that.calculate(data.total, data.next, data.action);
            data.next = "";
            data.action = action;
          } else {
            data.total = +data.next || 0;
            data.next = "";
            data.action = action;
          }

          // ���补充代码：获取 .origin-value 元素
          var valEl = null;
          valEl = document.querySelector(".origin-value");
          valEl && (valEl.innerHTML = data.next || data.total || "0");
        },
        calculate: function (n1, n2, operator) {
          n1 = +n1 || 0;
          n2 = +n2 || 0;
          if (operator === "÷") {
            // 请补充代码：获取除法的结果
            return n2 == 0 ? 0 : ~~((n1 / n2) * 100) / 100;
          } else if (operator === "x") {
            // 请补充代码：获取乘法的结果
            return ~~(n1 * n2 * 100) / 100;
          } else if (operator === "+") {
            // 请补充代码：获取加法的结果
            return ~~((n1 + n2) * 100) / 100;
          } else if (operator === "-") {
            // 请补充代码：获取减法的结果
            return ~~((n1 - n2) * 100) / 100;
          }
        },
      };
      Calculator.init();

      // 测试代码
      //   function aaa() {
      //     Calculator.init();
      //     Calculator.result("清空");
      //     var n = Calculator.calculate(0.2, 0.4, "+");
      //     console.log(n);
      //     var result = !!(n === 0.6);
      //     return result;
      //   }
      //   console.log(aaa());
    </script>
  </body>
</html>
